<template>
  <div>
    <el-card>
      <v-table
        ref="tableRef"
        :table="table"
        :apiFn="tablePage"
        :apiParam="{ current: 1, size: 10, daterange: undefined }"
        :search="form"
        :formParam="formParam"
      >
        <!-- form：在v2中，表单的插槽无法使用 #customize="data" 来获取数据 -->
        <!-- 想使用插槽获取数据，请使用v-form/v-search组件，demo请看index/page2组件 -->
        <template #customize>
          <el-input
            v-model="formParam['customize']"
            :placeholder="`请输入自定义`"
            size="small"
            clearable
          />
        </template>
        <!-- 中间层：信息/按钮等 -->
        <!-- <template #info></template> -->
        <!-- table：表格插槽可以使用 #customize="data" 来获取数据 -->
        <template #image="{ row }">
          <el-image
            style="width: 50px; height: 50px"
            :src="row.image"
            :preview-src-list="[row.image]"
            preview-teleported
          />
        </template>
        <template #operate="{ row }">
          <el-popconfirm title="确认删除此项吗？" @confirm="onDelete(row.id)">
            <template #reference>
              <el-button type="text" style="color: #f56c6c">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </v-table>
    </el-card>
  </div>
</template>

<script>
import { form, table } from "./config/page";
import { tablePage, tableDelete } from "@/api";

export default {
  data() {
    return {
      form,
      table,
      formParam: {},
      tablePage,
    };
  },
  methods: {
    onDelete(id) {
      tableDelete({ id }).then(() => {
        this.$message.success("删除成功");
        onRefresh();
      });
    },
    onRefresh() {
      this.$refs.tableRef.refresh();
    },
  },
};
</script>

<style lang="scss" scoped></style>
